import React, { useState } from 'react'
import { Layout, Dropdown,Avatar  } from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from '@ant-design/icons';

const { Header } = Layout;

export default function TopHeader() {
  const [collapsed, setCollapsed] = useState(false)
  //顶部导航图标点击时取反
  const changeCollapsed = () => {
    setCollapsed(!collapsed)
  }
  //头像菜单项
  const items = [
    {
      key: '1',
      label: '超级管理员'
    },
    {
      key: '4',
      danger: true,
      label: '退出',
    },
  ];

  return (
    <Header className="site-layout-background" style={{ padding: '0 16px' }}>
      {/* {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })} */}
      {/* 如果为真加载什么 假加载什么 */}
      {
        collapsed ? <MenuUnfoldOutlined onClick={changeCollapsed} /> : <MenuFoldOutlined onClick={changeCollapsed} />
      }
      {/* 设置浮动 */}
      <div style={{ float: 'right' }}>
        <span>欢迎酸酸回来</span>
        <Dropdown menu={{items}}>
          <Avatar size="large" icon={<UserOutlined />} />
        </Dropdown>
      </div>
    </Header>
  )
}
